
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>诗词列表</title>
  <script src="leancloud.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js"></script>
  <link rel="stylesheet" href="loading.css">
  <link rel="stylesheet" href="leancloud.css">
  <script src="js/shufaDictJS.js"></script>
  <style>
    .poem-card {
      /* border: 1px solid #ccc; */
      /* border-radius: 5px; */
      padding: 10px;
      margin: 10px;
      width: 100%;
      /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); */
      /* border-radius: 5px; */
      /* background-color: var(--bg-content-color); */
    }
    .poem-card:hover {
      cursor: pointer;
      /* 其他鼠标状态样式 */
    }
    .poem-title {
      font-size: 1.2em;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .poem-author {
      color: #666;
      margin-bottom: 5px;
    }
    .poem-content {
      max-height: 3.6em; /* 2 * line-height * lines */
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .icon {
      width: 24px; /* 设置图标宽度 */
      height: 24px; /* 设置图标高度 */
    }
    .data {
      opacity: 0; /* 初始时将数据的透明度设置为0，隐藏数据 */
      transition: opacity 0.5s ease; /* 添加过渡动画效果 */
    }

    .title {
      display: inline-block; /* 使用inline-block让h1和h2在同一行显示 */
      vertical-align: bottom; /* 让h1和h2底部对齐 */
    }
   
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    h1 {
      display: inline-block; /* 使用inline-block让h1和h2在同一行显示 */
      vertical-align: bottom; /* 让h1和h2底部对齐 */
    }
    .btn-search {
      display: inline-block; /* 使用inline-block让h1和h2在同一行显示 */
      vertical-align: bottom; /* 让h1和h2底部对齐 */
    }
    #backButton {
      background-image: url('images/back.png');
      width: 20px;
      height: 20px;
      background-size: cover;
      cursor: pointer;
      /* background-color: #666; */
    }
    .item1 {
      /* 或任何你想要的百分比 */
      margin-bottom: -20px;
      margin-right: 15px;
    }

    .item2 {
      flex-grow: 1;
      /* 这将占据剩余的所有空间 */
    }
    #containers {
      display: flex;
      align-items: center;
      /* 垂直居中对齐 */
    }
  </style>
</head>
<body>

    
  <div id="containers">
    <div id="backButton" class="item1"></div>
    <div id="search" class="item2">

      <form class="search-form" action="javascript:return true" autocomplete="off" onsubmit="return false;">
        <div class="search-input">

            <input maxlength="80" type="search" class="search-input" id="search-input" placeholder="请输入关键字..."
            required="">
          
        </div>
      </form>
    </div>
  </div>


  <div class="loading">
    <div></div>
    <div></div>
    <div></div>
</div>
    <!-- 这里放置数据内容 -->
    <div class="data">
      <h6 id="count"></h6>
      <div id="poem-list"></div>
      <div id="pagination">

        <div id="buttonContainer">
          <div id="moreButton"></div>
        </div>

      </div>
    </div>
  <script>
  
  hiddenEle()
    
    localStorage.removeItem('searchKeyword', "");
    var elements = document.querySelector('.post-title__text');
    elements.textContent = '诗词文'

    var postTitle = document.querySelector('.post-title');
    postTitle.style.display = 'none';
    var headeRight = document.querySelector('.header__right');
    headeRight.style.display = 'none';
    var headeLeft = document.querySelector('.header__left');
    headeLeft.style.display = 'none';
    
    var currentPage = 1;
    var pageSize = 10; // 每页显示的条目数
    initLeanCloud()
    requestData(currentPage,pageSize,"",handleData)

    const query = new AV.Query("guwen");
    query.count().then((count) => {
      var elements = document.getElementById('count');
      elements.textContent = '目前已收录' + count + '首'
    });

    var img = document.getElementById('moreButton');
    img.addEventListener('click', function() {
      currentPage++;
      var keyword = localStorage.getItem('searchKeyword');
      if (keyword == null) {
        keyword = ""
      }
      console.log('keyword:',keyword);
      requestData(currentPage,pageSize,keyword,handleData)
    });

    function handleData() {
      console.log('获取到的数据为：');
      // 在这里处理获取到的数据，例如更新页面内容等
      var data = document.querySelector('.data');
      var loading = document.querySelector('.loading');
      loading.style.display = 'none'; // 隐藏loading动画
      data.style.opacity = 0.8; // 显示数据
    }
    // 监听搜索输入框
    document.addEventListener('DOMContentLoaded', function() {
      var inputElement = document.getElementById('search-input');
      inputElement.value = '';
      inputElement.addEventListener('input', function(event) {
        // 实时获取输入框中的内容
        var inputValue = inputElement.value;
        console.log('输入内容为: ' + inputValue);
        // localStorage.setItem('searchPoemKeyword', inputValue);
        // clean()
        // requestData(currentPage,pageSize,inputValue,handleData);
      });
      inputElement.addEventListener('keyup', function(event) {
        if (event.key === 'Enter') {
          // 用户按下了回车键，执行相应的操作
          console.log('用户按下了回车键');
          var inputValue = inputElement.value;
          console.log('搜索内容为：' + inputValue);

          localStorage.setItem('searchKeyword', inputValue);
          clean()
          requestData(currentPage,pageSize,inputValue,handleData);
          // 在这里添加你想要执行的操作
        }
      });
    });
    var img = document.getElementById('backButton');
    img.addEventListener('click', function () {
      window.history.back()
    });
  </script>
</body>

</html>